<template>
	<div class="backHidden" v-if="windows">
		<div class="content">
			<i class="el-icon-close" @click="close"></i>
			<div class="form">
				<div class="ablumName">
					<span>相册名： </span><el-input
					  type="text"
					  placeholder="请输入内容"
					  v-model.trim="ablumName"
					  maxlength="10"
					  show-word-limit
					>
					</el-input>
					<el-button type="primary" @click="submit" >提交</el-button>
				</div>
				
				<el-transfer
						:titles="['所有分类', '我的选择']"
				    filterable
				    :filter-method="filterMethod"
				    filter-placeholder="请输入城市拼音"
				    v-model="value"
				    :data="data">
				 </el-transfer>
			</div>
			<div class="recommend">
				<span>推荐分类：</span>
				  <el-link type="info" @click="recommend()">动物</el-link> 
				  <el-link type="info" @click="recommend()">建筑</el-link>
					<el-link type="info" @click="recommend()">风景</el-link>
					<el-link type="info" @click="recommend()">人像</el-link>
					<el-link type="info" @click="recommend()">我</el-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		 data() {
		      const generateData = () => {
		        const data = [];
		        const cities = [{name:'上海',id:'0001'}, {name:'北京',id:'0002'},{name:'广州',id:'0003'},{name:'深圳',id:'0004'},{name:'南京',id:'0005'}];
		        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing'];
		        cities.forEach((city, index) => {
		          data.push({
		            label: city.name,
		            key: city.id,
		            pinyin: pinyin[index]
		          });
		        });
		        return data;
		      };
		      return {
						windows:false,
		        data: generateData(),
						//已经选中的标签
		        value: ["0001","0002","0003"],
		        filterMethod(query, item) {
		          return item.pinyin.indexOf(query) > -1;
		        },
						ablumName:''
		      };
		    },
			methods:{
				// 关闭窗口
				close(){
					this.windows = false;
				},
				// 提交
				submit(){
					if(this.ablumName == ''){
						this.$message.error('相册名不为空！')
					}
					if(this.value == ''){
						this.$message.error('分类不为空！')
					}
					console.log(this.value)
					console.log(this.ablumName)
				},
				//推荐信息
				recommend(){
					
				},
				openChange(){
					this.windows = true;
				}
			}
	}
</script>

<style scoped="scoped">
	.backHidden{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .4);
		overflow: hidden;
		z-index: 9;
		text-align: left;
	}
	.content{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #f6f6f6;
		border-radius: 10px;
		border: #ebeef5 solid 1px;
		z-index: 10;
		width: 680px;
		height: 600px;
	}
	.content .form{
		width: 630px;
    margin: 50px auto;
	}
	.content .el-icon-close{
		position: absolute;
		right: 18px;
		top: 20px;
		font-size: 18px;
		cursor: pointer;
	}
	.content .el-icon-close:hover{
		color:#4da4ff ;
	}
	.el-transfer{
		margin-top: 50px;
	}
	.el-input{
		width: 350px;
	}
	.el-input__inner{
		height: 30px;
	}
	.form>>>.el-transfer-panel__list.is-filterable,
	.form>>>.el-transfer-panel__body{
		height: 300px;
	}
	.el-button{
		float: right;
		margin-right: 40px;
		height: 35px;
		line-height: 10px;
	}
	.recommend{
		text-align: center;
		margin: 0 auto;
		width: 500px
	}
	.recommend a{
		margin-left: 5px;
	}
</style>
